<template>
  <div class="button-wrapper">
    <fx-card title="基础用法">
      <ul class="list">
        <li>
          <fx-button class="mr20">默认按钮</fx-button>
          <fx-button class="mr20" type="primary">主要按钮</fx-button>
          <fx-button class="mr20" type="success">成功按钮</fx-button>
          <fx-button class="mr20" type="warning">警告按钮</fx-button>
          <fx-button class="mr20" type="error">错误按钮</fx-button>
        </li>
        <li>
          <fx-button class="mr20" plain>默认按钮</fx-button>
          <fx-button class="mr20" type="primary" plain>主要按钮</fx-button>
          <fx-button class="mr20" type="success" plain>成功按钮</fx-button>
          <fx-button class="mr20" type="warning" plain>警告按钮</fx-button>
          <fx-button class="mr20" type="error" plain>错误按钮</fx-button>
        </li>
        <li>
          <fx-button class="mr20" round>默认按钮</fx-button>
          <fx-button class="mr20" type="primary" round>主要按钮</fx-button>
          <fx-button class="mr20" type="success" round>成功按钮</fx-button>
          <fx-button class="mr20" type="warning" round>警告按钮</fx-button>
          <fx-button class="mr20" type="error" round>错误按钮</fx-button>
        </li>
        <li>
          <fx-button class="mr20" icon="icon-plus_circle_fill" circle></fx-button>
          <fx-button class="mr20" type="primary" icon="icon-search" circle></fx-button>
          <fx-button class="mr20" type="success" icon="icon-play" circle></fx-button>
          <fx-button class="mr20" type="warning" icon="icon-pause" circle></fx-button>
          <fx-button class="mr20" type="error" icon="icon-banzou-" circle></fx-button>
        </li>
      </ul>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用状态">
      <fx-button class="mr20" disabled>默认按钮</fx-button>
      <fx-button class="mr20" type="primary" disabled>主要按钮</fx-button>
      <fx-button class="mr20" type="success" disabled>成功按钮</fx-button>
      <fx-button class="mr20" type="warning" disabled>警告按钮</fx-button>
      <fx-button class="mr20" type="error" disabled>错误按钮</fx-button>
      <br><br>
      <fx-button class="mr20" plain disabled>默认按钮</fx-button>
      <fx-button class="mr20" type="primary" plain disabled>主要按钮</fx-button>
      <fx-button class="mr20" type="success" plain disabled>成功按钮</fx-button>
      <fx-button class="mr20" type="warning" plain disabled>警告按钮</fx-button>
      <fx-button class="mr20" type="error" plain disabled>错误按钮</fx-button>
      <template #hide>
        <pre v-highlight="disabled"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="文字按钮">
      <fx-button class="mr20" type="text">文字按钮</fx-button>
      <fx-button class="mr20" type="text" disabled>文字按钮</fx-button>
      <template #hide>
        <pre v-highlight="text"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="图标按钮">
      <fx-button class="mr20" type="primary" icon="icon-heart"></fx-button>
      <fx-button class="mr20" type="primary" icon="icon-heart-fill"></fx-button>
      <fx-button class="mr20" type="primary" icon="icon-heart-fill">喜欢</fx-button>
      <fx-button class="mr20" type="primary">下载 <i class="iconfont icon-download ml5"/></fx-button>
      <template #hide>
        <pre v-highlight="icon"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="加载">
      <fx-button class="mr20" type="primary" :loading="loading" @click="loadingClick">
        {{ loading ? '加载中' : "确定" }}
      </fx-button>
      <fx-button class="mr20" type="primary" icon="icon-heart" loading>点赞</fx-button>
      <template #hide>
        <pre v-highlight="loadings"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="不同尺寸">
      <fx-row class="mb10">
        <fx-col>
          <fx-radio-group v-model="sizeRadio" size="mini">
            <fx-radio-button label="large">大型按钮</fx-radio-button>
            <fx-radio-button label="middle">中型按钮</fx-radio-button>
            <fx-radio-button label="default">默认按钮</fx-radio-button>
            <fx-radio-button label="mini">小型按钮</fx-radio-button>
          </fx-radio-group>
        </fx-col>
      </fx-row>
      <fx-row class="mb10">
        <fx-col>
          <fx-button class="mr20" :size="sizeRadio">默认按钮</fx-button>
          <fx-button class="mr20" type="primary" :size="sizeRadio">主要按钮</fx-button>
          <fx-button class="mr20" type="success" :size="sizeRadio">成功按钮</fx-button>
          <fx-button class="mr20" type="warning" :size="sizeRadio">警告按钮</fx-button>
          <fx-button class="mr20" type="error" :size="sizeRadio">错误按钮</fx-button>
        </fx-col>
      </fx-row>
      <fx-row class="mb10">
        <fx-col>
          <fx-button class="mr20" plain :size="sizeRadio">默认按钮</fx-button>
          <fx-button class="mr20" type="primary" plain :size="sizeRadio">主要按钮</fx-button>
          <fx-button class="mr20" type="success" plain :size="sizeRadio">成功按钮</fx-button>
          <fx-button class="mr20" type="warning" plain :size="sizeRadio">警告按钮</fx-button>
          <fx-button class="mr20" type="error" plain :size="sizeRadio">错误按钮</fx-button>
        </fx-col>
      </fx-row>
      <fx-row class="mb10">
        <fx-col>
          <fx-button class="mr20" round :size="sizeRadio">默认按钮</fx-button>
          <fx-button class="mr20" type="primary" round :size="sizeRadio">主要按钮</fx-button>
          <fx-button class="mr20" type="success" round :size="sizeRadio">成功按钮</fx-button>
          <fx-button class="mr20" type="warning" round :size="sizeRadio">警告按钮</fx-button>
          <fx-button class="mr20" type="error" round :size="sizeRadio">错误按钮</fx-button>
        </fx-col>
      </fx-row>
      <fx-row class="mb10">
        <fx-col>
          <fx-button class="mr20" icon="icon-plus_circle_fill" circle :size="sizeRadio"></fx-button>
          <fx-button class="mr20" type="primary" icon="icon-search" circle :size="sizeRadio"></fx-button>
          <fx-button class="mr20" type="success" icon="icon-play" circle :size="sizeRadio"></fx-button>
          <fx-button class="mr20" type="warning" icon="icon-pause" circle :size="sizeRadio"></fx-button>
          <fx-button class="mr20" type="error" icon="icon-banzou-" circle :size="sizeRadio"></fx-button>
        </fx-col>
      </fx-row>
      <fx-row class="mb10">
        <fx-col>
          <fx-input-number v-model="numberSize"></fx-input-number>
        </fx-col>
      </fx-row>
      <fx-row class="mb10">
        <fx-col>
          <fx-button class="mr20" type="primary" :size="numberSize">主要按钮</fx-button>
          <fx-button class="mr20" type="primary" plain :size="numberSize">主要按钮</fx-button>
          <fx-button class="mr20" type="primary" round :size="numberSize">主要按钮</fx-button>
          <fx-button class="mr20" type="primary" icon="icon-search" circle :size="numberSize"></fx-button>
        </fx-col>
      </fx-row>
      <template #hide>
        <pre v-highlight="size"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API 属性">
      <fx-table :data="buttonApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const buttonApi = [
  {
    name: 'type',
    directions: '按钮类型',
    type: 'String',
    value: 'primary | success | warning | error | text | default',
    default: 'default'
  },
  { name: 'plain', directions: '是否镂空', type: 'Boolean', default: 'false' },
  { name: 'round', directions: '是否圆角', type: 'Boolean', default: 'false' },
  { name: 'circle', directions: '是否为圆形', type: 'Boolean', default: 'false' },
  { name: 'disabled', directions: '是否禁用', type: 'Boolean', default: 'false' },
  { name: 'icon', directions: '文字左侧添加图标', type: 'String', default: '-' },
  { name: 'loading', directions: '正在加载', type: 'Boolean', default: 'false' },
  { name: 'size', directions: '大小尺寸', type: 'String', value: 'large | middle | default | mini', default: 'default' }
]

const loading = ref<boolean>(false)
const sizeRadio = ref<string>('default')
const numberSize = ref<number>(32)
const loadingClick = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 3000)
}

const base = `<fx-button class="mr20">默认按钮</fx-button>
<fx-button class="mr20" type="primary">主要按钮</fx-button>
<fx-button class="mr20" type="success">成功按钮</fx-button>
<fx-button class="mr20" type="warning">警告按钮</fx-button>
<fx-button class="mr20" type="error">错误按钮</fx-button>
<br><br>
<fx-button class="mr20" plain>默认按钮</fx-button>
<fx-button class="mr20" type="primary" plain>主要按钮</fx-button>
<fx-button class="mr20" type="success" plain>成功按钮</fx-button>
<fx-button class="mr20" type="warning" plain>警告按钮</fx-button>
<fx-button class="mr20" type="error" plain>错误按钮</fx-button>
<br><br>
<fx-button class="mr20" round>默认按钮</fx-button>
<fx-button class="mr20" type="primary" round>主要按钮</fx-button>
<fx-button class="mr20" type="success" round>成功按钮</fx-button>
<fx-button class="mr20" type="warning" round>警告按钮</fx-button>
<fx-button class="mr20" type="error" round>错误按钮</fx-button>
<br><br>
<fx-button class="mr20" icon="icon-plus_circle_fill" circle></fx-button>
<fx-button class="mr20" type="primary" icon="icon-search" circle></fx-button>
<fx-button class="mr20" type="success" icon="icon-play" circle></fx-button>
<fx-button class="mr20" type="warning" icon="icon-pause" circle></fx-button>
<fx-button class="mr20" type="error" icon="icon-banzou-" circle></fx-button>`
const disabled = `<fx-button class="mr20" disabled>默认按钮</fx-button>
<fx-button class="mr20" type="primary" disabled>主要按钮</fx-button>
<fx-button class="mr20" type="success" disabled>成功按钮</fx-button>
<fx-button class="mr20" type="warning" disabled>警告按钮</fx-button>
<fx-button class="mr20" type="error" disabled>错误按钮</fx-button>
<br><br>
<fx-button class="mr20" plain disabled>默认按钮</fx-button>
<fx-button class="mr20" type="primary" plain disabled>主要按钮</fx-button>
<fx-button class="mr20" type="success" plain disabled>成功按钮</fx-button>
<fx-button class="mr20" type="warning" plain disabled>警告按钮</fx-button>
<fx-button class="mr20" type="error" plain disabled>错误按钮</fx-button>`
const text = `<fx-button class="mr20" type="text">文字按钮</fx-button>
<fx-button class="mr20" type="text" disabled>文字按钮</fx-button>`
const icon = `<fx-button class="mr20" type="primary" icon="icon-suit_heart"></fx-button>
<fx-button class="mr20" type="primary" icon="icon-heart_fill"></fx-button>
<fx-button class="mr20" type="primary" icon="icon-heart_fill">喜欢</fx-button>
<fx-button class="mr20" type="primary">下载 <i class="iconfont icon-download ml5"/></fx-button>`
const loadings = `<fx-button class="mr20" type="primary" :loading="loading" @click="loadingClick">
  {{ loading?'加载中':"确定" }}
</fx-button>
<fx-button class="mr20" type="primary" icon="icon-heart" loading>点赞</fx-button>`
const size = `<fx-row class="mb10">
  <fx-col>
    <fx-radio-group v-model="sizeRadio" size="mini">
      <fx-radio-button label="large">大型按钮</fx-radio-button>
      <fx-radio-button label="middle">中型按钮</fx-radio-button>
      <fx-radio-button label="default">默认按钮</fx-radio-button>
      <fx-radio-button label="mini">小型按钮</fx-radio-button>
    </fx-radio-group>
  </fx-col>
</fx-row>
<fx-row class="mb10">
  <fx-col>
    <fx-button class="mr20" :size="sizeRadio">默认按钮</fx-button>
    <fx-button class="mr20" type="primary" :size="sizeRadio">主要按钮</fx-button>
    <fx-button class="mr20" type="success" :size="sizeRadio">成功按钮</fx-button>
    <fx-button class="mr20" type="warning" :size="sizeRadio">警告按钮</fx-button>
    <fx-button class="mr20" type="error" :size="sizeRadio">错误按钮</fx-button>
  </fx-col>
</fx-row>
<fx-row class="mb10">
  <fx-col>
    <fx-button class="mr20" plain :size="sizeRadio">默认按钮</fx-button>
    <fx-button class="mr20" type="primary" plain :size="sizeRadio">主要按钮</fx-button>
    <fx-button class="mr20" type="success" plain :size="sizeRadio">成功按钮</fx-button>
    <fx-button class="mr20" type="warning" plain :size="sizeRadio">警告按钮</fx-button>
    <fx-button class="mr20" type="error" plain :size="sizeRadio">错误按钮</fx-button>
  </fx-col>
</fx-row>
<fx-row class="mb10">
  <fx-col>
    <fx-button class="mr20" round :size="sizeRadio">默认按钮</fx-button>
    <fx-button class="mr20" type="primary" round :size="sizeRadio">主要按钮</fx-button>
    <fx-button class="mr20" type="success" round :size="sizeRadio">成功按钮</fx-button>
    <fx-button class="mr20" type="warning" round :size="sizeRadio">警告按钮</fx-button>
    <fx-button class="mr20" type="error" round :size="sizeRadio">错误按钮</fx-button>
  </fx-col>
</fx-row>
<fx-row class="mb10">
  <fx-col>
    <fx-button class="mr20" icon="icon-plus_circle_fill" circle :size="sizeRadio"></fx-button>
    <fx-button class="mr20" type="primary" icon="icon-search" circle :size="sizeRadio"></fx-button>
    <fx-button class="mr20" type="success" icon="icon-play" circle :size="sizeRadio"></fx-button>
    <fx-button class="mr20" type="warning" icon="icon-pause" circle :size="sizeRadio"></fx-button>
    <fx-button class="mr20" type="error" icon="icon-banzou-" circle :size="sizeRadio"></fx-button>
  </fx-col>
</fx-row>
<fx-row class="mb10">
  <fx-col>
    <fx-input-number v-model="numberSize"></fx-input-number>
  </fx-col>
</fx-row>
<fx-row class="mb10">
  <fx-col>
    <fx-button class="mr20" type="primary" :size="numberSize">主要按钮</fx-button>
    <fx-button class="mr20" type="primary" plain :size="numberSize">主要按钮</fx-button>
    <fx-button class="mr20" type="primary" round :size="numberSize">主要按钮</fx-button>
    <fx-button class="mr20" type="primary" icon="icon-search" circle :size="numberSize"></fx-button>
  </fx-col>
</fx-row>`
</script>

<style scoped lang="scss">
.button-wrapper {
  .list {
    > li {
      margin-bottom: 20px;
    }
  }
}
</style>
